<template>
  <div>
    <el-dialog
      v-loading="loading"
      title="项目授权"
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      center
      width="750px"
      @close="dialogClose"
    >
      <div style="width: 650px;margin-left: 30px;">
        <div class="selected-project-header">
          <div><span>用户：</span><span>{{ user.userName }}</span></div>
          <el-input
            v-model="searchParams.fnameL2"
            placeholder="工程项目"
            clearable
            size="mini"
            prefix-icon="el-icon-search"
            style="width: 160px"
            @input="paramsInput"
          />
          <el-input
            v-model="searchParams.cflastname"
            placeholder="最新名称"
            clearable
            size="mini"
            prefix-icon="el-icon-search"
            style="width: 160px"
            @input="paramsInput"
          />
          <el-button
            size="mini"
            icon="el-icon-plus"
            type="primary"
            @click="addProject"
          >新增
          </el-button>
        </div>
        <el-table :data="projectList" size="mini" height="60vh">
          <el-table-column type="index" label="序号" width="50" align="center" />
          <el-table-column property="fnameL2" label="工程项目" width="200" align="center" />
          <el-table-column property="cflastname" label="最新名称" width="200" align="center" />
          <el-table-column property="date" label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="submitData">保存</el-button>
        <el-button @click="dialogTableVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-loading="loading"
      style="margin-top: 30px;"
      title="选择项目"
      :visible.sync="showProject"
      :close-on-click-modal="false"
      center
      width="500px"
      @close="innerDialogClose"
    >
      <div style="width: 360px;margin-left: 30px;">
        <select-project-tree ref="selectProjectRef" @selectProject="selectProject" />
      </div>
      <div slot="footer">
        <el-button type="primary" @click="selectProject">确定</el-button>
        <el-button @click="showProject = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getGcPermission, saveGcPermission } from '@/api/system/user'
import SelectProjectTree from './SelectProjectTree'
export default {
  name: 'ProjectAuthorization',
  components: { SelectProjectTree },
  props: {
    user: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      projectList: [],
      originalList: [], // 全部列表数据
      isEmpty: false,
      loading: false,
      showProject: false,
      searchParams: {
        fnameL2: '',
        cflastname: ''
      }
    }
  },
  watch: {
    user() {
      this.getProjects()
    }
  },
  created() { // 初始化
    this.getProjects()
  },
  methods: {
    paramsInput() {
      this.projectList = this.originalList.filter(org => org.fnameL2.indexOf(this.searchParams.fnameL2) !== -1 && org.cflastname.indexOf(this.searchParams.cflastname) !== -1)
    },
    dialogClose() {
      this.projectList = []
      this.searchParams.fnameL2 = ''
      this.searchParams.cflastname = ''
    },
    handleDelete(row) {
      this.projectList = this.projectList.filter(pro => pro.fid !== row.fid)
      this.originalList = this.originalList.filter(pro => pro.fid !== row.fid)
    },
    addProject() {
      this.showProject = true
    },
    innerDialogClose() {
      this.$refs.selectProjectRef.setCheckedKeys()
    },
    selectProject() {
      this.showProject = false
      const projects = this.$refs.selectProjectRef.getCheckedProjects()
      const arr = []
      for (let i = 0; i < projects.length; i++) {
        if (!this.projectList.some(pro => pro.fid === projects[i].fid)) {
          arr.push(projects[i])
        }
      }
      this.projectList = [...arr, ...this.projectList]
      this.originalList = [...this.projectList]
    },
    submitData() {
      const params = {
        projectIds: Array.from(new Set(this.originalList.map(pro => pro.fid))).join(','),
        userFid: this.user.fid
      }
      saveGcPermission(params).then(
        (response) => {
          if (response.code === 200) {
            // this.getProjects()
            this.dialogTableVisible = false
            this.$message.success('项目授权成功。')
          }
        }
      ).finally(() => {

      })
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate)
    },
    getProjects() {
      if (this.user.fid === undefined) return
      this.loading = true
      getGcPermission({ userFid: this.user.fid }).then(
        (response) => {
          if (response.code === 200) {
            this.projectList = response.data
            this.originalList = [...response.data]
            this.loading = false
            this.isEmpty = response.data.length === 0
          }
        }
      ).finally(() => {

      })
    }
  }
}
</script>

<style scoped lang='scss'>
.selected-project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px 20px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
}
</style>
